<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery表格生成</title>
    <script src="js/jquery.js"></script>
    <style>
        body, ul, li, img {
            padding: 0px;
            margin: 0px;
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }

        img {
            display: inline;
            border: none;
        }

        ul, li {
            list-style-type: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            word-break: keep-all;
            table-layout: fixed;
            margin-left: -1px;
            margin-top: -1px;
        }

        table tr.selected {
            background: #fbec88;
        }

        table tr td {
            border: 1px dotted #ccc;
            vertical-align: top;
            white-space: nowrap;
            overflow: hidden;
            zoom: 1;
        }
        .gy-table-header-wrap {
            position: relative;
            border: 1px solid #ccc;
            border-right-width: 0;
            overflow: hidden;
            background: rgb(227, 237, 247);
            margin-left:-1px;
            margin-top: -1px;
        }

        .gy-table-header {
            position: absolute;
            left:0;
            top:0;
        }
        .gy-table-header .tb-cell-inner {
            /*头部标题样式*/
            height:17px;
        }

        .gy-table {
           position: relative;
       }
        .gy-table-body .tb-cell {
            line-height: 23px;
        }

        .gy-table-body .tb-cell-inner,
        /*表格单元格样式*/
        .gy-table-header .tb-cell-inner {
            /*表格头部单元格样式*/
            padding: 4px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .tb-row-num {
            /*表格行号的样式*/
            text-align: center;
        }
        .tb-col {
            float: left;
        }

        .gy-col-name {
            border-right: 1px solid #ccc;
        }

        .gy-table-wrap {
            position: relative;
            box-sizing: content-box;
            overflow: hidden;
            border: 1px solid #cccccc;
            margin: 10px auto;
        }

        .gy-text-center {
            text-align: center;
        }

        .gy-table-body-wrap {
            position: relative;
            overflow: auto;
        }

        .gy-table-wrap * {
            box-sizing: content-box;
        }

        .gy-tb-loading {
            background:#222222;
        }


        .gradient6 {
            width: 100px;
            height: 100px;
            background: -webkit-radial-gradient(80% 20%,#ace, #f96);
        }
        .gradient7 {
            width: 100px;
            height: 100px;
            background: -webkit-repeating-linear-gradient(-45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
        }

    </style>
</head>
<body>
</body>

<script src="js/gyTable.js"></script>
<script>
    $(function () {
        var itemFields = ['name','age'];
        var mainColumns1 = [
            {text: '日期', dataIndex: 'createDate', width:200},
            {text: '地址', dataIndex: 'receiverAddress', width:200},
            {text: '店铺名称', dataIndex: 'shopName',width:200},
            {text: '京东快递', dataIndex: 'expressName',width:200},
            {text: '订单号', dataIndex: 'orderTypeId', convert: getAge,width:200}
        ];

        var mainColumns = [
            {
                text: '姓名',//设置该列的名称
                dataIndex: 'name',//设置该列对应数据的索引
                width: 100,//设置该列的宽度
                elementCls:'gy-text-center'//给对应的列添加class
            },
            {
                text: '年龄',
                dataIndex: 'age',
                convert: getAge,//装换数据
                width:200
            }
        ];


        var table1 = GridTable({
            data: [
                {rownum: '1', name: '张三', age: '18'},
                {rownum: '2', name: '张三的小老婆', age: '13'},
                {rownum: '3', name: '张三的大老婆', age: '14'}
            ],

            fields: itemFields,
            columns: mainColumns
        });

        table1.load([//重新载入静态的表格数据
            {rownum: '1', name: '王1麻', age: '27'},
            {rownum: '2', name: '王2麻', age: '20'},
            {rownum: '3', name: '王3麻', age: '24'},
            {rownum: '3', name: '王4麻', age: '21'},
            {rownum: '3', name: '王5麻', age: '22'},
            {rownum: '3', name: '王6麻', age: '21'}
        ]);

        var table2 = GridTable({
            elementCls:'table1',
            id:'table1',
            width: 200,
            rowNum:{
                width:30
            },
            proxy: {
                loadStatus:true,
                url: "testdata/tableData.json",
                param: {name:'zdw',age:'19'},
                dataType:'json',
                pageParam: {//分页请求的字段名称
                    page: 'page',
                    pageSize: 'limit'
                },
                reader:{
                    root:'rows',
                    totalProperty:'total'
                },
                pageSize: 10,
                page: 1
            },
            height: 200,
            columns: mainColumns1,
            loaded:function(self){//远程数据，必须通过loaded来注册事件
                table2Func(self);
            }
        });

        var table3 = GridTable({
            data: [
                {rownum: '1', name: '小四1', age: '27'},
                {rownum: '2', name: '小吴1', age: '20'},
                {rownum: '3', name: '小明1', age: '24'},
                {rownum: '3', name: '小红1', age: '24'},
                {rownum: '3', name: '大明1', age: '24'},
                {rownum: '3', name: '小梅1', age: '24'},
                {rownum: '3', name: '小黑1', age: '24'},
                {rownum: '3', name: '小白1', age: '24'},
                {rownum: '3', name: '小李1', age: '24'},
                {rownum: '3', name: '小张', age: '24'},
                {rownum: '3', name: '小邓', age: '24'},
                {rownum: '3', name: '小王', age: '24'},
                {rownum: '3', name: '小周', age: '24'},
                {rownum: '3', name: '小葛', age: '24'},
                {rownum: '3', name: '小朱', age: '24'},
                {rownum: '3', name: '小雯', age: '24'}
            ],
            elementCls:'table3',
            id:'table3',
            width: 200,
            rowNum:{
                width:30
            },
            height: 200,
            seleted:'multiple',
            columns: mainColumns
        });

        function getAge(value) {
            return "<input style='background:#efefef;padding:0px 4px;border:1px solid #ccc;width:60px' class='age' type = 'text' value='" + value + "'>";
        }

        function table2Func(_this){
            _this.gridView.find("tr").each(function (index) {
                $(this).click(function () {
                    $(this).addClass('selected');
                    $(this).siblings().removeClass('selected');
                    $(this).find('.age').select();
                });

                $(this).find(".age").change(function(){
                    _this.store.data[index]['age'] = $(this).val();
                    _this.store.modifyRaw.push(_this.store.data[index]);
                });

                $(this).on('keydown',function (e) {
                    var focusH, nextNode;
                    if (e.keyCode == '13') {
                        nextNode = $(this).next();
                        $(this).removeClass('select-bg').find('.age').blur();
                        nextNode.addClass('select-bg').find('.age').select();
                        if (nextNode.length > 0) {
                            focusH = nextNode.get(0).offsetTop;
                            if (focusH > 150) {
                                _this.gridView.find(".gy-table-body-wrap").scrollTop(focusH);
                            }
                        }
                    }
                });
            });
        }

        table3.gridView.find("tr").each(function (index) {

            $(this).click(function () {
                $(this).addClass('selected');
                $(this).siblings().removeClass('selected');
                $(this).find('.age').select();
            });

            $(this).find(".age").change(function(){
                table3.store.data[index]['age'] = $(this).val();
                table3.store.modifyRaw.push(table3.store.data[index]);
            });

            $(this).keydown(function (e) {
                var focusH, nextNode;
                if (e.keyCode == '13') {
                    nextNode = $(this).next();
                    $(this).removeClass('selected').find('.age').blur();
                    nextNode.addClass('selected').find('.age').select();
                    if (nextNode.length > 0) {
                        focusH = nextNode.get(0).offsetTop;
                        if (focusH > 150) {
                            table3.gridView.find(".gy-table-body-wrap").scrollTop(focusH);
                        }
                    }
                }
            });

        });

    })



</script>
</html>